<template>
    <div class="row">
        <div class="dishes-st">
            <panel-title>菜品库存</panel-title>
            <div class="row">
                <div class="table-item" v-for="(item, index) in tableData" :key="index">
                    <el-table :data="item" stripe>
                        <el-table-column type="index" label="序号" width="40"
                                         :class-name="'txt-center'"></el-table-column>
                        <el-table-column prop="productName" label="菜品名" width="150"></el-table-column>
                        <el-table-column prop="icon" label="图片" width="60">
                            <template slot-scope="scope">
                                <span class="icon-out">
                                    <img :src="scope.row.icon ? scope.row.icon : defaultIcon" width="41" height="30"/>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="保温柜 / 数量" :class-name="'bwc-color'">
                            <template slot-scope="scope">
                                <div class="cupboard-list">
                                    <span class="item" v-for="(item, index) in scope.row.bwpcData" :key="index">{{item.cabinetId}}/{{item.cabinetStock}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="冷库 / 数量">
                            <template slot-scope="scope">
                                <div class="cupboard-list">
                                    <span class="item" v-for="(item, index) in scope.row.lcpcData" :key="index">{{item.cabinetId}}/{{item.cabinetStock}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="" width="60">
                            <ratio-bar :total='200' :cur='40'></ratio-bar>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div :style="{width: '17.18%'}">
            <panel-title>保温柜库存</panel-title>
            <el-table :data="listBwc" stripe>
                <el-table-column type="index" label="序号" width="40"
                                 :class-name="'txt-center'"></el-table-column>
                <el-table-column prop="id" label="保温柜号">
                    <template slot-scope="scope">
                        <span>#{{scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="库存">
                    <template slot-scope="scope">
                        <span>{{scope.row.num > -1 ? scope.row.num : 0}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="" width="60">
                    <ratio-bar :total='200' :cur='40'></ratio-bar>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import PanelTitle from '@/components/title.vue'
    import RatioBar from '@/components/ratioBar.vue'

    export default {
        components: {PanelTitle, RatioBar},
        props: {
            list: {
                type: Array,
                default: () => {
                    return []
                }
            },
            listBwc: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                defaultIcon: require('@/assets/images/picture.png')
            }
        },
        computed: {
            tableData() {
                let ln = this.list.length
                let sp = Math.ceil(ln / 3)
                let arr1 = this.list.slice(0, sp)
                let arr2 = this.list.slice(sp, sp * 2)
                let arr3 = this.list.slice(sp * 2)

                return [arr1, arr2, arr3]
            }
        },
        mounted() {
        },
        methods: {
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    }
                }
            }
        }
    }
</script>
<style lang="less">
    .dishes-st {
        width: 82%;

        .table-item {
            width: 33%;
        }

    }
</style>
